<template>
  <div class="header-wrap">
    <Search v-show="showSearch" @closeSear="showSearch=false"></Search>
    <div class="header hidden-xs-only">
      <router-link class="logo" :to="`/`"><img src="../assets/img/fxl_logo.png" alt=""></router-link>
      <div class="right-nav">
       <el-menu  
       style="display: inline-block"
       open="2"
       :default-active="$route.fullPath"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#393939"
        active-text-color="#d3202a"
        :router="openRouter">
        <el-menu-item index="/">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title" index="/company/aboutus/"><router-link to="/company/aboutus/">关于我们</router-link></template>
          <el-menu-item index="/company/aboutus/" style="display:none"></el-menu-item>
          <el-menu-item index="/info/aboutus/1/">公司简介</el-menu-item>
          <el-menu-item index="/info/aboutus/2/">公司架构</el-menu-item>
          <el-menu-item index="/info/aboutus/3/">发展历程</el-menu-item>
          <el-menu-item index="/info/aboutus/4/">社会责任</el-menu-item>
          <el-menu-item index="/info/aboutus/5/">公司成员</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><router-link to="/NewsCenter/#all">新闻中心</router-link></template>
           <el-menu-item index="/NewsCenter/#all" style="display:none"></el-menu-item>
          <el-menu-item index="/NewsCenter/#news">公司新闻</el-menu-item>
          <el-menu-item index="/NewsCenter/#pro">项目动态</el-menu-item>
          <el-menu-item index="/NewsCenter/#media">媒体动态</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> <router-link to="/company/business/">公司业务</router-link></template>
          <el-menu-item index="/company/business/" style="display:none"></el-menu-item>
          <el-menu-item index="/info/business/1/">房地产板块</el-menu-item>
          <el-menu-item index="/info/business/2/">物业管理板块</el-menu-item>
          <el-menu-item index="/info/business/3/">旅游产业板块</el-menu-item>
          <el-menu-item index="/info/business/4/">文化体育板块</el-menu-item>
          <el-menu-item index="/info/business/5/">金融服务板块</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"><router-link to="/company/enterprise/">企业文化</router-link></template>
          <el-menu-item index="/company/enterprise/" style="display:none"></el-menu-item>
          <el-menu-item index="/info/enterprise/1/">企业理念</el-menu-item>
          <el-menu-item index="/info/enterprise/2/">员工风采</el-menu-item>
           <el-menu-item index="/info/enterprise/3/">员工活动</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title"><router-link to="/company/hr/">人力资源</router-link></template>
          <el-menu-item index="/company/hr/" style="display:none"></el-menu-item>
          <el-menu-item index="/info/hr/1/">人才理念</el-menu-item>
          <el-menu-item index="/info/hr/2/">人才培养</el-menu-item>
           <el-menu-item index="/info/hr/3/">招聘信息</el-menu-item>
        </el-submenu>
      </el-menu>
      <i class="el-icon-search fxl-search" @click="showSearch = true"></i>
    </div>
    </div> 
     <div class="min-header">
       <div>
       <router-link class="logo" :to="`/`"><img src="../assets/img/fxl_logo.png" alt=""></router-link>
       </div>
       <div class="min-nav">
         <router-link to="/company/aboutus/">关于我们</router-link>
         <router-link to="/NewsCenter/#all">新闻中心</router-link>
         <router-link to="/company/business/">公司业务</router-link>
         <router-link to="/company/enterprise/">企业文化</router-link>
         <router-link to="/company/hr/">人力资源</router-link>
         <router-link to="/company/hr/">党团工会</router-link>
       </div>
  </div>
  </div>
</template>

<script>
import Search from "../components/Search";
export default {
  name: 'Header',
  data() {
    return {
      showSearch: false,
      openRouter: true
    }
  },
  components: {
    Search
    
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.header
  .el-menu.el-menu--horizontal{
    border: none;
  }

  .el-menu--horizontal .el-menu .el-menu-item{
    display inline-block
  }

  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title, .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: 2px solid #d3202a;
    color #d3202a
    i {
      color #d3202a
    }
  }
  .el-submenu__title,.el-menu-item{
    font-size 16px;
  }

  .el-menu--popup{
    min-width: 150px;
    padding: 5px 10px;
    margin-top: 18px;
    margin-left: -30%;
    margin-right: 30%;
    background-color #D8D8D8
  }
  .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
    background-color #D8D8D8
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    color #d3202a !important
  }


.header-wrap
  position fixed
  top 0px
  left 0px
  width 100%
  z-index 999
  display flex
  flex-direction column
  justify-content center
  height 92px
  background-color #fff
  .min-header
    display none
  .header
    display: flex;
    justify-content: space-between;
    max-width: 1160px;
    box-sizing border-box
    width 100%
    padding: 0 20px
    margin: 0 auto;
    .right-nav
      line-height 46px
      .fxl-search
        font-size 21px
        font-weight 500
        vertical-align top
        margin-top 21px
        margin-left 10px
        cursor pointer
        &:before
          color: #3d3d3d
      a
        display inline-block
        box-sizing border-box
        border-bottom 2px solid #fff
        &:hover
          color #d3202a
          text-decoration none
    .logo
      margin-top 13px
      img
        height: 45px;
        display: inline-block;
@media (max-width 765px) 
  .header-wrap
    height auto
    .min-header 
      display block
      box-sizing border-box
      padding 10px 20px
      .min-nav
        margin-top 5px
        display flex
        justify-content space-between
        a
          display inline-block
          box-sizing border-box
          height 30px
          line-height 30px
          font-size 12px
          text-decoration none
          &.router-link-active
            border-bottom 1px solid #d3202a
            color #d3202a
      .logo
        margin-top 4px
        img
          height 25px
          width auto
          
.nav-list
  position: fixed;
  background-color: #e6e6e6;
  top: 0px;
  right: 0;
  height: 100%;
  width auto
  min-width: 200px;
  z-index: 1000
  overflow: scroll;

  .el-menu 
    height: 100%;
    border: 0;
  

  .el-menu-item, .el-submenu__title
    height: 50px;
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
    padding-left: 48px !important;
    margin-bottom: 15px;
    a
      text-decoration none
      color: #fff;
      &.router-link-exact-active
        color rgba(54, 115, 243, 1)
  .el-menu--inline .el-menu-item
    padding-left: 58px !important;
    font-size 17px
      

  .el-menu-item-group__title 
    display: none;
  

  .el-menu-item-group 
    margin: 10px 0 5px;

    .el-menu-item 
      font-size: 14px;
      font-weight: 500;
      color: rgba(54, 115, 243, 1);
      line-height: 50px;
      a
        text-decoration none
        height: 50px;
        font-size:16px;
        font-weight: 500;
        color: #fff;
        line-height: 50px;
        &.router-link-exact-active
          color rgba(54, 115, 243, 1)
        
  .el-icon-arrow-down:before 
    font-size: 16px;
    color: #4d4d4d;
  

  .el-submenu__icon-arrow 
    margin-top: -8px;
  

  .nav-top 
    height: 92px;
    background-color: #e6e6e6;

    img
      position: absolute;
      cursor: pointer;
      right: 45px;
      top: 35px;
      width: 20px;
      height: 20px;
    

</style>  
